import { ref, computed } from 'vue'
import { useEventListener } from '@/hooks/useWindowEvent'

export function useWinSize() {

  const fullWidth = ref<number>(document.documentElement.clientWidth)

  function handleResize() {
    fullWidth.value = document.documentElement.clientWidth
  }

  useEventListener('resize', handleResize)

  const winSize = computed(() => {
    let width = fullWidth.value
    if(width >= 0 && width <= 480){
      return 'xs'
    }else if(width > 480 && width <= 576){
      return 'sm'
    }else if(width > 576 && width <= 768){
      return 'md'
    }else if(width > 768 && width <= 992){
      return 'lg'
    }else if(width > 992 && width <= 1200){
      return 'xl'
    }else if(width > 1200){
      return 'xxl'
    }
  })

  const mobileComputed = computed(() => {
    return winSize.value === 'sm' || winSize.value === 'xs' ? true : false
  })
  
  const viewHeight = computed(() => {
    return winSize.value === 'sm' || winSize.value === 'xs' ? 'calc(100vh - 55px)' : 'calc(100vh - 90px)'
  })

  return {
    mobileComputed,
    viewHeight
  }
}